<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学期研学计划</title>
		<link rel="stylesheet" type="text/css" href="css/BE/BE_semester_studies_plan.css"/>
		<link rel="stylesheet" type="text/css" href="tool/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-1.9.1.js"></script>
		<script src="js/BE/highcharts.js"></script>
		<script src="js/BE/exporting.js"></script>
		<script src="js/BE/highcharts-zh_CN.js"></script>
		<!-- element引入开始 -->
			<script src="//unpkg.com/vue/dist/vue.js"></script>
			<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
			<!-- 引入样式 -->
			<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
			<!-- 引入组件库 -->
			<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- element引入结束 -->
		<script src="tool/layui/layui.js"></script>
		<script src="js/bootstrap.js"></script>
	</head>
	<body>
		<header></header>
		<section>
			<!-- 标题 -->
			<div id="title-div">
				<p>学期研学计划</p>
			</div>
			<!-- 添加计划 and 搜索 -->
			<div id="addandsearch-div">
				<div>
					<div id="selectschool">
						<div class="block">
						  <el-cascader
						    v-model="value"
							placeholder="请选择学校"
						    :options="options"
							:props="{ expandTrigger: 'hover' }"
						    @change="handleChange"></el-cascader>
						</div>
					</div>
					<div id="selectsemester">
						<div class="block">
						  <el-cascader
						    v-model="value"
							placeholder="请选择学期"
						    :options="options"
						    @change="handleChange"></el-cascader>
						</div>
					</div>
				</div>
				<div>
					<input id="searchtext" type="text" placeholder="请输入" />
					<img src="img/BE/search-icon.png" width="20px" height="20px" >
				</div>
			</div>
			<!-- 研学计划统计 -->
			<div id="evaluatestatistics">
				<p>研学计划统计</p>
				<ul>
					<li>
						<div>计划出行次数</div>
						<div>149</div>
					</li>
					<li>
						<div>学生数量</div>
						<div>68119</div>
					</li>
					<li>
						<div>教师数量</div>
						<div>4200</div>
					</li>
					<li>
						<div>研学基地数量</div>
						<div>58154</div>
					</li>
				</ul>
			</div>
			<!-- 统计图表 -->
			<div id="chart">
				<div id="container" style="width:50%;height:100%;float: left;"></div>
				<div id="container2" style="width:50%;height:100%;float: left;"></div>
			</div>
			<!-- 计划 -->
			<div id="plan">
				<ul>
					<li>
						<div class="plan-img-div">
							<img class="plan-img" src="img/BE/userheader.jpg"  >
						</div>
						<div class="plan-info">
							<ul style="margin-top: 1.8%;line-height: 20px;">
								<li style="color: black;">云台山研学计划6</li>
								<li>李明</li>
								<li>开始时间</li>
								<li>计划结束时间</li>
							</ul>
							<ul style="line-height: 20px;">
								<li>驻马店市&nbsp;东风路小学&nbsp;&nbsp;89人</li>
								<li>18900000000</li>
								<li>2020-3-3 14:20</li>
								<li>2020-3-7 14:20</li>
							</ul>
						</div>
						<div class="operation">
							<ul>
								<li><a href="javascript:void(0);" >查看</a></li>
								<li><a href="javascript:void(0);" >编辑</a></li>
								<li><a href="javascript:void(0);" >出行申报</a></li>
								<li class="dropdown ul_li_dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" href="#">
										<span style="position: relative;top: -1.5px;">|</span>更多 <span class="caret"></span>
									</a>
									<ul class="dropdown-menu">
										<li><a href="javascript:void(0);">删除</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="plan-img-div">
							<img class="plan-img" src="img/BE/userheader.jpg"  >
						</div>
						<div class="plan-info">
							<ul style="margin-top: 1.8%;line-height: 20px;">
								<li style="color: black;">云台山研学计划6</li>
								<li>李明</li>
								<li>开始时间</li>
								<li>计划结束时间</li>
							</ul>
							<ul style="line-height: 20px;">
								<li>安阳市第一高级中学&nbsp;&nbsp;120人</li>
								<li>18900000000</li>
								<li>2020-3-3 14:20</li>
								<li>2020-3-7 14:20</li>
							</ul>
						</div>
						<div class="operation">
							<ul>
								<li><a href="javascript:void(0);" >查看</a></li>
								<li><a href="javascript:void(0);" >编辑</a></li>
								<li><a href="javascript:void(0);" >出行申报</a></li>
								<li class="dropdown ul_li_dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" href="#">
										<span style="position: relative;top: -1.5px;">|</span>更多 <span class="caret"></span>
									</a>
									<ul class="dropdown-menu">
										<li><a href="javascript:void(0);">删除</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="plan-img-div">
							<img class="plan-img" src="img/BE/userheader.jpg"  >
						</div>
						<div class="plan-info">
							<ul style="margin-top: 1.8%;line-height: 20px;">
								<li style="color: black;">云台山研学计划6</li>
								<li>李明</li>
								<li>开始时间</li>
								<li>计划结束时间</li>
							</ul>
							<ul style="line-height: 20px;">
								<li>安阳市第一高级中学&nbsp;&nbsp;120人</li>
								<li>18900000000</li>
								<li>2020-3-3 14:20</li>
								<li>2020-3-7 14:20</li>
							</ul>
						</div>
						<div class="operation">
							<ul>
								<li><a href="javascript:void(0);" >查看</a></li>
								<li><a href="javascript:void(0);" >编辑</a></li>
								<li><a href="javascript:void(0);" >出行申报</a></li>
								<li class="dropdown ul_li_dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" href="#">
										<span style="position: relative;top: -1.5px;">|</span>更多 <span class="caret"></span>
									</a>
									<ul class="dropdown-menu">
										<li><a href="javascript:void(0);">删除</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="plan-img-div">
							<img class="plan-img" src="img/BE/userheader.jpg"  >
						</div>
						<div class="plan-info">
							<ul style="margin-top: 1.8%;line-height: 20px;">
								<li style="color: black;">云台山研学计划6</li>
								<li>李明</li>
								<li>开始时间</li>
								<li>计划结束时间</li>
							</ul>
							<ul style="line-height: 20px;">
								<li>三年级&nbsp;&nbsp;89人</li>
								<li>18900000000</li>
								<li>2020-3-3 14:20</li>
								<li>2020-3-7 14:20</li>
							</ul>
						</div>
						<div class="operation">
							<ul>
								<li><a href="javascript:void(0);" >查看</a></li>
								<li><a href="javascript:void(0);" >编辑</a></li>
								<li><a href="javascript:void(0);" >出行申报</a></li>
								<li class="dropdown ul_li_dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" href="#">
										<span style="position: relative;top: -1.5px;">|</span>更多 <span class="caret"></span>
									</a>
									<ul class="dropdown-menu">
										<li><a href="javascript:void(0);">删除</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			<div id="paging">
				<iframe src="BE_paging.html" width="100%" height="50px" frameborder="0" scrolling="no"></iframe>
			</div>
		</section>
		<footer></footer>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/BE/BE_semester_studies_plan.js"></script>
	</body>
	<script>
		// 柱状图
		var chart = Highcharts.chart('container', {
			chart: {
				type: 'column'
			},
			title: {
				text: '主要出行研学基地'
			},
			xAxis: {
				type: 'category',
				labels: {
					rotation: 20  // 设置轴标签旋转角度
				}
			},
			legend: {
				enabled: false
			},
			tooltip: {
				pointFormat: '数据: <b>{point.y}</b>'
			},
			series: [{
				name: '总人口',
				data: [
					['云台山', 1245],
					['清明上河园', 1102],
					['河南省博物院', 984],
					['少林寺', 953],
					['白居易墓', 600],
					['杜甫故里', 530],
					['河南地质博物馆', 400],
					['XXX', 380]
				]
			}]
		});
		
		// 饼状图开始
		var chart = Highcharts.chart('container2', {
		    chart: {
		        spacing : [40, 0 , 40, 0]
		    },
		    title: {
		        floating:true,
		        text: '研学线路特色占比'
		    },
		    tooltip: {
		        pointFormat: '{title.text}占比: {point.percentage:.1f}%'
		    },
		    plotOptions: {
		        pie: {
		            allowPointSelect: true,
		            cursor: 'pointer',
		            dataLabels: {
		                enabled: true,
		                format: '<b>{point.name}</b>:{point.percentage:.1f} %',
		                style: {
		                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		                }
		            },
		            // point: {
		            //     events: {
		            //         mouseOver: function(e) {  // 鼠标滑过时动态更新标题
		            //             // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
		            //             chart.setTitle({
		            //                 text: e.target.name+ '\t'+ e.target.y + ' %'
		            //             });
		            //         }
		            //         , 
		            //         click: function(e) { // 同样的可以在点击事件里处理
		            //             chart.setTitle({
		            //                 text: e.point.name+ '\t'+ e.point.y + ' %'
		            //             });
		            //         }
		            //     }
		            // },
		        }
		    },
		    series: [{
		        type: 'pie',
		        innerSize: '80%',
		        data: [
					['传统文化', 31.10],
		            ['革命传统', 22.83],
		            ['国情教育', 21.45],
		            ['国防科工', 16.14],
		            ['自然生态', 8.48]
		        ]
		    }]
		}, function(c) { // 图表初始化完毕后的会掉函数
		    // 环形图圆心
		    var centerY = c.series[0].center[1],
		        titleHeight = parseInt(c.title.styles.fontSize);
		    // 动态设置标题位置
		    c.setTitle({
		        y:centerY + titleHeight/2
		    });
		});
		// 饼状图结束
		
		//点击更多显示其他操作
		var morecount = 0;
		$(".more div").click(function() {
			morecount ++;
			if (morecount % 2 != 0) {
				$(".more div").next().css({"display":"none"});
				$(this).next().css({"display":"block"});
			} else {
				$(".more div").next().css({"display":"none"});
			}
		});
		// 级联菜单
		var school = {
		    data() {
		      return {
		        value: [],
		        options: [{
					value: '0',
					label: '郑州',
					children: [{
						value: '0',
						label: '中原区',
						children: [{
						  value: '0',
						  label: '郑州市第一中学'
						}, {
						  value: '1',
						  label: '建设路小学'
						}, {
						  value: '2',
						  label: '郑州四十二中'
						}]
		          }, {
					  value: '1',
					  label: '二七区',
					  children: [{
					      value: '3',
					      label: '郑州市第二中学'
					  }, {
					  	  value: '4',
					  	  label: '淮河路小学'
					  }, {
					  	  value: '5',
					  	  label: '郑州四中'
					  }]
		          }]
		        }]
		      };
		    },
		    methods: {
		      handleChange(value) {
		        console.log(value);
		      }
		    }
		  };
		var Ctor = Vue.extend(school);
		new Ctor().$mount('#selectschool');
		
		
		
		var semester = {
		    data() {
		      return {
		        value: [],
		        options: [{
					value: '0',
					label: '2019年上学期'
		        }, {
					value: '1',
					label: '2019年下学期'
				}, {
					value: '2',
					label: '2020年下学期'
				}, {
					value: '3',
					label: '2020年下学期'
				}]
		      };
		    },
		    methods: {
		      handleChange(value) {
		        console.log(value);
		      }
		    }
		  };
		var Ctor = Vue.extend(semester);
		new Ctor().$mount('#selectsemester');
	</script>
</html>
